<template>
  <div class="container">
    <a-card class="general-card" :title="$route.meta.locale">
      <table-search
        v-permission="'monitor:logininfor:query'"
        :fileds="searchFileds"
        @search="search"
        @reset="search"
      ></table-search>
      <xTable
        v-model:refresh="refresh"
        v-model:selected-keys="selectedKeys"
        :params="params"
        :columns="tableColumns"
        :http="{
          list: getListData,
          del: delOperlog,
          empty: cleanOperlog,
          exported: operlog,
          batchDel: delOperlog,
        }"
        :http-permission="{
          del: 'monitor:logininfor:remove',
          empty: 'monitor:logininfor:empty',
          exported: 'monitor:logininfor:export',
        }"
        row-key="operId"
      >
        <template #businessType="{ row }">
          <dict-tag :options="dict.sys_oper_type" :value="row.businessType" />
        </template>
        <template #status="{ row }">
          <dict-tag :options="dict.sys_common_status" :value="row.status" />
        </template>
        <template #optional="{ row }">
          <a-button type="text" @click="openDetail(row)">详细</a-button>
        </template>
      </xTable>
    </a-card>
    <a-modal
      v-model:visible="$visible"
      width="800px"
      :hide-cancel="true"
      @before-close="$visible = false"
    >
      <template #title> 系统操作日志详情 </template>
      <a-descriptions>
        <a-descriptions-item label="操作模块" :span="2">
          {{ detail.title }} / {{ typeFormat(detail) }}</a-descriptions-item
        >
        <a-descriptions-item label="请求地址" :span="2">
          {{ detail.operUrl }}
        </a-descriptions-item>
        <a-descriptions-item label="登录信息" :span="2">
          {{ detail.operName }} / {{ detail.operIp }} /
          {{ detail.operLocation }}</a-descriptions-item
        >
        <a-descriptions-item label="请求方式" :span="2">
          {{ detail.requestMethod }}
        </a-descriptions-item>
        <a-descriptions-item label="操作方法" :span="12"
          >{{ detail.method }}
        </a-descriptions-item>
        <a-descriptions-item label="请求参数" :span="12"
          >{{ detail.operParam }}
        </a-descriptions-item>
        <a-descriptions-item label="返回参数" :span="12"
          >{{ detail.jsonResult }}
        </a-descriptions-item>
        <a-descriptions-item label="操作状态" :span="2">
          <div v-if="detail.status === 0">正常</div>
          <div v-else-if="detail.status === 1">失败</div>
        </a-descriptions-item>
        <a-descriptions-item label="操作时间" :span="2"
          >{{ parseTime(detail.operTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
        </a-descriptions-item>
        <a-descriptions-item
          v-if="detail.status === 1"
          label="异常信息："
          :span="12"
        >
          {{ detail.errorMsg }}
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { getDict, selectDictLabel } from '@/utils/dict';
  import { addDateRange, parseTime } from '@/utils/index';
  import { getListData, delOperlog, cleanOperlog } from '@/api/system/operlog';
  import { operlog } from '@/api/exportFile';
  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';

  const dict = getDict('sys_oper_type', 'sys_common_status');
  const selectedKeys: any = ref([]);
  const $visible = ref(false);
  const detail = ref({
    title: '',
    businessType: '',
    method: '',
    operName: '',
    operIp: '',
    operLocation: '',
    operUrl: '',
    requestMethod: '',
    operParam: '',
    jsonResult: '',
    operTime: '',
    status: 0,
    errorMsg: '',
  });
  // 定义查询字段
  const searchFileds: Array<any> = reactive([
    {
      span: 5,
      field: 'title',
      placeholder: '请输入系统模块',
      label: '系统模块',
      tag: 'a-input',
      initValue: '',
    },
    {
      span: 5,
      field: 'operName',
      placeholder: '请输入操作人员',
      label: '操作人员',
      tag: 'a-input',
      initValue: '',
    },
    {
      span: 5,
      field: 'businessType',
      placeholder: '请选择类型',
      label: '类型',
      initValue: '',
      tag: 'a-select',
      attrs: {
        options: dict.sys_oper_type,
      },
    },
    {
      span: 5,
      field: 'status',
      placeholder: '请选择操作状态',
      label: '状态',
      initValue: '',
      tag: 'a-select',
      attrs: {
        // eslint-disable-next-line camelcase
        options: dict.sys_common_status,
        // getDict('sys_common_status'),
      },
    },
    {
      span: 5,
      field: 'dateRange',
      label: '创建时间',
      tag: 'a-range-picker',
      initValue: [],
    },
  ]);
  // 定义表格字段
  const tableColumns: Array<TableColumnData> = reactive([
    {
      dataIndex: 'operId',
      title: '日志编号',
      slotName: 'operId',
    },
    {
      dataIndex: 'title',
      title: '系统模块',
    },
    {
      dataIndex: 'businessType',
      title: '操作类型',
      slotName: 'businessType',
    },
    {
      dataIndex: 'requestMethod',
      title: '请求方式',
    },
    {
      dataIndex: 'operName',
      title: '操作人员',
    },
    {
      dataIndex: 'operIp',
      title: '操作地址',
    },
    {
      dataIndex: 'operLocation',
      title: '操作地点',
    },
    {
      dataIndex: 'status',
      title: '操作状态',
      slotName: 'status',
    },
    {
      dataIndex: 'operTime',
      title: '操作日期',
    },
    {
      dataIndex: 'optional',
      title: '操作',
      slotName: 'optional',
    },
  ]);
  const refresh = ref(true);
  // 定义表格查询参数
  const params = ref({
    dateRange: [],
  });
  // 定义搜索方法
  const search = (data: any) => {
    params.value = addDateRange(data, data?.dateRange);
    refresh.value = true;
  };
  const openDetail = (data: any) => {
    detail.value = data;
    $visible.value = true;
  };
  const typeFormat = (row: { businessType: any }) => {
    if (row.businessType === '') {
      return false;
    }
    return selectDictLabel(dict.sys_oper_type.value, row.businessType);
  };
</script>

<script lang="ts">
  export default {
    name: 'Role',
  };
</script>

<style scoped lang="less">
  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }
</style>
